<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible">
  <el-form :model="form" label-width="120px" ref='add' :rules='rules'>
    <el-form-item label="商品名称:" prop='skuName'>
       <el-input
      type="text"
      placeholder="请输入"
      maxlength="15"
      show-word-limit
      v-model='form.skuName'>
      </el-input>
    </el-form-item >
      <el-form-item label="品牌:" prop='brandName'>
       <el-input
      type="text"
      placeholder="请输入"
      maxlength="10"
      show-word-limit
      v-model='form.brandName'>
       </el-input>
    </el-form-item>
    <el-form-item label="商品价格（元）:" prop='price'>
     <el-input-number v-model="form.price" controls-position="right" :min="1"  placeholder="请输入"></el-input-number>
    </el-form-item>
    <el-form-item label="商品类型:" prop='classId'>
        <el-select v-model="form.classId" placeholder="请选择" >
        <el-option 
        v-for='item in type' :key='item.classId'
        :label="item.className" :value="item.classId"></el-option>
      </el-select>
    </el-form-item>
     <el-form-item label="规格:" prop='unit'>
       <el-input
      type="text"
      placeholder="请输入"
      maxlength="10"
      show-word-limit
      v-model='form.unit'>
       </el-input>
    </el-form-item>
    <el-form-item label="商品图片:">
      <el-upload
      :file-list='filelist'
      list-type="picture-card"
      class="avatar-uploader"
      action="#"
      :before-upload="beforeUpload"
      :on-remove='remove'
      :on-change="change"
      :on-preview="handlePictureCardPreview"
      :limit='limit'
      :class='filelist.length===limit?"hideAdd":""'
      :http-request="httpRequest"
      >
  <img class="avatar">
  <i class="el-icon-plus avatar-uploader-icon"></i>
  <div class="upload" slot="tip">支持扩展名：jpg、png，文件不得大于100kb</div>
</el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='visible=false'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 定</el-button>
  </div>
</el-dialog>
  <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {addcommodity,producttypeList,editcommidity,imgupload} from '@/api/commodity'
import { Upload } from 'element-ui';
export default {
  name: 'Add',
  props:{
    row:{
      type:Object,
      default:()=>({})
    },
    limit:{
    type:Number,
    default:1
   }
  },
  data() {
    return {
      form:{},
      visible:false,
      type:[],
      filelist:[],
      dialogVisible:false,
      dialogImageUrl:'',
      rules:{
        skuName:[
          {required:true,message:'必填',trigger:'blur'}
        ],
        brandName:[
          {required:true,message:'必填',trigger:'blur'}
        ],
        price:[
          {required:true,message:'必填',trigger:'blur'}
        ],
        region:[
          {required:true,message:'必填',trigger:'blur'}
        ],
        unit:[
          {required:true,message:'必填',trigger:'blur'}
        ],
        skuImage:[
          {required:true,message:'必填',trigger:'blur'}
        ]
      }
    };
  },

  created() {
        this.producttype()
  },

  methods: {
     async submit(){
      await this.$refs.add.validate()
      // const res = await addcommodity(this.form)
      // console.log(res,'新增商品管理');
       this.row.classId?await editcommidity(this.row.skuId) : await addcommodity(this.form) 
      // console.log(this.row.classId,'会有结果吗');
      // console.log(res,'新增商品类型');
      this.$message.success(`${this.row.skuId?'修改成功':'新增成功'}`)
      this.visible = false
      this.$parent.producttypeList()
    },
     remove(file,fileList){
      // file为删除的文件   fileList为剩余的文件   把最新的数据给列表  达到数据同步
      this.filelist=fileList;
    },
    change(file,fileList){
    this.filelist=fileList;
    },
    beforeUpload(file){
      const types = ['image/jpeg', 'image/png']
      if(!types.includes(file.type)){
        this.$message.warning('不符合图片格式')
        return false
      }
      else if(file.size>100000000){
        this.$message.warning('不符合图片大小')
        return false
      }
      return true
    },
     handlePictureCardPreview(file){
      this.dialogVisible=true
      console.log(file,'结果呢哈哈哈哈哈哈或');
      this.dialogImageUrl=file.url
    },
    // 自定义上传图片到服务器
    async httpRequest({file}){
      console.log(file,'111');
      const formData = new FormData()
      formData.append('fileName',file)
      console.log(formData,'formData');
      const res = await imgupload(formData)
      console.log(res,'11111111111');
    },
     // 商品类型
    async producttype(){
      const res = await producttypeList()
      console.log(res,'啊啊啊啊啊啊啊啊啊啊啊');
      this.type=res.currentPageRecords
    }
  },
  watch:{
    form:{
      handler(val){
        // console.log(val);
        this.filelist=[{url:val.skuImage}]
        console.log(this.filelist,'这个究竟是什么');
      }
    },
    visible(val){
      if(!val){
        this.$refs.add.resetFields()
        this.form={}
        this.filelist=[]  //为啥清空不了
        console.log(this.filelist,'这个结果在哪呢');
      }
    },
  },
  computed:{
     title(){
      console.log(this.row,'aaaaaaaaaaaaa');
     return this.row.skuId?'修改商品管理':'新增商品管理'
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input,.el-input-number{
  width: 500px;
}
::v-deep .el-form-item{
  width: 200px;
}
// ::v-deep  .el-upload{
//   width: 84px;
//   height: 84px;
// }

.upload{
width: 400px;
::v-deep i{
  width: 16px;
  height: 16px;
}
}
::v-deep .hideAdd .el-upload--picture-card {
  display: none;
}
</style>